<template>
  <div v-loading="loading" class="login-platform-main flex-y-center-center">
    <div v-if="isBind" class="flex-y-center-center">
      <div class="title">微信登录</div>
      <div v-if="qrcodeUrl" class="qr-code-container  ">
        <el-image :src="qrcodeUrl" />
        <div v-if="isQrcodeExpire" class="refresh-mask" @click="fetchMchData">
          <p>
            二维码已失效
            <br>点击刷新
          </p>
        </div>
      </div>
      <div class="tips">
        为保障帐号安全，使用当前服务商后台管理员绑定的微信
        <br>扫一扫登录：
        <span class="name">{{ $route.query.name }}</span>
      </div>
    </div>
    <div v-else class="tips">
      当前服务商后台管理员未绑定的微信
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { loginMch, loginMchStatus } from '@/api/mch'
import { oemInfo } from '@/api/sp/oem'

export default {
  data() {
    return {
      // 配置
      title: '登录商户平台',
      // 状态
      loading: false,
      isQrcodeExpire: false,
      isStopCheckQrcodeState: true,
      isBind: true,
      // 数据
      platformType: 'mch',
      qrcodeUrl: null,
      codeNo: null
    }
  },
  computed: {
    ...mapGetters(['oemMap', 'activeSidebarSpInfo', 'activeSidebarMchInfo'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    if (this.$route.query.mchId) {
      this.platformType = 'mch'
      this.fetchMchData()
    } else if (this.$route.query.spId) {
      this.platformType = 'sp'
    }
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {

    /**
     * 数据组
     */
    // 获取登陆二维码
    fetchMchData() {
      this.isStopCheckQrcodeState = false
      this.isQrcodeExpire = false
      this.loading = true
      loginMch({ params: { businessId: this.$route.query.mchId } })
        .then(res => {
          this.codeNo = res.data.codeNo
          this.qrcodeUrl = res.data.qrcodeUrl
          this.isQrcodeExpire = false
          this.checkMchQrcodeState()
        })
        .catch(() => {
          this.isBind = false
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 检查微信登陆二维码状态
    checkMchQrcodeState() {
      if (!this.codeNo) return
      const params = {}
      params.codeNo = this.codeNo
      params.scope = this.scope
      loginMchStatus({ params })
        .then(res => {
          switch (res.data.state) {
            case 0: { // 0.未登陆未失效,轮询状态 2000ms
              const timerId = setTimeout(() => {
                if (this.isStopCheckQrcodeState) return clearTimeout(timerId)
                this.checkMchQrcodeState()
              }, 2000)
              break
            }
            case 1:
              // if (process.env.VUE_APP_ENV === 'development') {
              //   // window.open(`${this.oemMap[this.oemMap.activeOem].mchDevUrl}/#/login?codeNo=${this.codeNo}`)
              //   window.location.href = `${this.oemMap[this.oemMap.activeOem].mchDevUrl}/#/login?codeNo=${this.codeNo}`
              // } else {
              //   // window.open(`${this.oemMap[this.oemMap.activeOem].mchPrdUrl}/#/login?codeNo=${this.codeNo}`)
              //   window.location.href = `${this.oemMap[this.oemMap.activeOem].mchPrdUrl}/#/login?codeNo=${this.codeNo}`
              // }
              this.fetchOemInfo()
              break
            default: // 2.失效,显示提示
              this.isQrcodeExpire = true
              this.isStopCheckQrcodeState = true
              break
          }
        })
        .catch(() => {
          this.isQrcodeExpire = true
          this.isStopCheckQrcodeState = true
        })
        .finally(() => {
        })
    },

    // 获取oem配置
    fetchOemInfo() {
      this.loading = true
      oemInfo().then(res => {
        if (this.platformType === 'mch') {
          let mchWebUrl = process.env.VUE_APP_MCH_WEB_URL
          mchWebUrl = res.data && res.data.mchWebUrl || mchWebUrl
          window.location.href = mchWebUrl.includes('http') ? `${mchWebUrl}/#/login?codeNo=${this.codeNo}` : `http://${mchWebUrl}/#/login?codeNo=${this.codeNo}`
        }
      }).finally(() => {
        this.loading = false
      })
    }

    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  font-weight: bold;
  font-size: 16px;
}

.login-platform-main {
  height: 100vh;
}

.qr-code-container {
  position: relative;
  width: 205px;
  height: 205px;
  margin: 30px 0;

  .el-image {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.refresh-mask {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
  background: #000;
  opacity: 0.8;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.tips {
  text-align: center;
  line-height: 1.5;

  .name {
    font-weight: bold;
  }
}
</style>
